import React, {Component} from 'react';
import {Link} from "react-router-dom";
import {reqBlogList, reqDeleteBlog, reqBlogByTitle} from "../../../api";
import {formatDate} from "../../../util";
import {
    Card, Button, Table, Tag, Typography, Input,
    Popconfirm, Space, Image, message
} from "antd";
import {PlusOutlined, DeleteOutlined, EditOutlined, SearchOutlined} from '@ant-design/icons';

class BlogList extends Component {

    state = {
        dataSource: [],
        total: 0,
        current: 1,
        isByTitle: false,
        title: "",
    }

    componentDidMount() {
        this.initDataSource();
    }

    initDataSource = async () => {
        let {current} = this.state;
        let {data} = await reqBlogList(current);
        let {list, total} = data;
        let dataSource = list.reverse();
        this.setState({dataSource, total});
    }

    deleteBlog = async (data) => {
        let {isByTitle} = this.state;
        let {status, msg} = await reqDeleteBlog(data.id)
        if (status === 0) {
            message.success(msg)
            if (isByTitle) {
                this.initDataSourceWithTitle();
                return;
            }
            this.initDataSource();
            return;
        }
        message.error(msg);
    }

    pageChange = (pageInfo) => {
        let {isByTitle} = this.state;
        let {current} = pageInfo;
        this.setState({current}, () => {
            if (isByTitle) {
                this.initDataSourceWithTitle();
                return;
            }
            this.initDataSource();
        });
    }

    initDataSourceWithTitle = async () => {
        let {current, title} = this.state;
        let {data} = await reqBlogByTitle(current, title);
        let {total, list} = data;
        this.setState({total, dataSource: list});
    }

    search = (event) => {
        let {value} = event.target;
        if (value.trim()) {
            this.setState({isByTitle: true, title: value}, () => {
                this.initDataSourceWithTitle();
            });
            return;
        }
        this.setState({isByTitle: false});
        this.initDataSource();
    }

    columns = [
        {
            title: '标题',
            dataIndex: 'title',
            render: (data) => {
                return <Typography.Link>{data}</Typography.Link>
            }
        },
        {
            title: '版权',
            dataIndex: 'flag',
            render: (data) => {
                return <Tag color="green">{data}</Tag>
            }
        },
        {
            title: '首图',
            dataIndex: 'firstPicture',
            render: (data) => {
                return <Image src={data} width={80}/>
            }
        },
        {
            title: '分类',
            render: (_, record) => {
                let {typeName} = record.type;
                return <Tag color="orange">{typeName}</Tag>
            }
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            render: (data) => {
                return formatDate("YYYY-MM-dd HH:mm:ss", data)
            }
        },
        {
            title: '操作',
            render: (data) => {
                return (
                    <Space size="small">
                        <Button size="small">
                            <Link to={{pathname: "/admin/blogEdit", state: {id: data.id}}}>
                                <EditOutlined/>
                            </Link>
                        </Button>
                        <Popconfirm
                            title="确定删除吗？"
                            onConfirm={() => this.deleteBlog(data)}
                            okText="确定"
                            cancelText="取消"
                        >
                            <Button size="small" danger icon={<DeleteOutlined/>}/>
                        </Popconfirm>
                    </Space>
                )
            }
        },
    ];

    render() {
        let {dataSource, total} = this.state;
        return (
            <Card title={
                <>
                    <Input
                        prefix={<SearchOutlined/>}
                        allowClear={true}
                        onPressEnter={this.search}
                        placeholder="输入标题回车搜索" style={{width: 270}}/>
                </>} extra={<Button
                type="primary"
                onClick={() => this.props.history.replace("/admin/blogEdit")}
                icon={<PlusOutlined/>}>添加博客</Button>}>
                <Table
                    rowKey="id"
                    size="small"
                    pagination={{total, showTotal: (total) => `共 ${total} 条博文`}}
                    onChange={this.pageChange}
                    dataSource={dataSource}
                    columns={this.columns}/>
            </Card>
        );
    }
}

export default BlogList;
